<template>
  <div class="recording-box">
    <div class="select">
      <div class="left-s">
        <span>视频类型：</span>
        <el-select v-model="videoType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="right-s">
        <div class="search-input">
          <el-input
            v-model.trim="form.searchVideo"
            placeholder="请输入查询关键字"
          ></el-input>
          <el-button
            type="goon"
            class="but"
            size="small"
            icon="iconfont icon-sousuo"
            v-on:click="search()"
          >
          </el-button>
          <el-button
            type="info"
            icon="el-icon-delete"
            @click="deleteAll"
            v-if="isDelete"
            :disabled="!flag"
            >批量删除</el-button
          >
          <div class="buttons" v-else>
            <el-button type="warning">全选</el-button>
            <el-button type="success">确定</el-button>
            <el-button type="warning" @click="cancel()">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- content -->
    <div class="content" v-if="odataList.length > 0">
      <!-- 视频列表 -->
      <div class="dataList-box">
        <div class="main-part">
          <div class="videoImg">
            <img
              src="~@/assets/images/mo_bg.png"
              onerror="this.src='~@/assets/images/img-lose1.png'"
            />
          </div>
          <!-- 状态 -->
          <div class="case1" v-if="taskstate > -1">
            {{ taskstate | recording }}
          </div>
          <!-- 类型 -->
          <div class="case2">{{ type | titleState }}</div>
          <!-- 时长 -->
          <div class="case3">{{ time | stime }}</div>
          <!-- 审核 -->
          <div class="case4">{{ audit | auditState }}</div>
          <!-- 蒙版 -->
          <div
            v-if="taskstate == 0 || taskstate == 1 || taskstate == 2"
            class="mask"
            style="cursor: no-drop"
            :title="titleTip"
          ></div>
          <div v-else class="mask"></div>
          <!-- 录制错误出现 -->
          <div class="videoError" v-if="taskstate < 0" style="cursor: no-drop">
            <div class="error"></div>
            <span>录制错误</span>
          </div>
        </div>
        <!-- 标题 -->
        <div
          class="videoTip"
          :style="{
            cursor:
              taskstate == 0 || taskstate == 1 || taskstate == 2
                ? ' no-drop'
                : 'pointer',
          }"
        >
          <div class="tip">{{ tip | capturename }}</div>
          <div class="collect" @click="collectdata()">
            <img
              v-if="collectionState == 0 || collectionState == 1"
              :src="collectionState == 0 ? img1 : img2"
              alt=""
            />
          </div>
        </div>
        <!-- 详情 删除 截图 审核 -->
        <div class="bottom-box">
          <div class="detailItem" :title="lookDetail" @click="detailItem">
            <i class="iconfont icon-bianji"></i> 详情
          </div>
          <div class="deleteItem" :title="lookDelete">
            <i class="iconfont icon-shanchu"></i> 删除
          </div>
          <div class="screenshot" title="预览">
            <i class="iconfont icon-lookIcon"></i> 截图
          </div>
          <!-- <div class="checkItem" title="审核">
            <i class="iconfont icon-examineIcon"></i> 审核
          </div> -->
          <!-- <div class="checkItem1" title="撤审">
            <i class="iconfont icon-toexamineIcon"></i> 撤审
          </div> -->
        </div>
        <!-- 批量删除遮罩层 -->
        <div class="maskAll" v-if="isShow" @click="fnClick()">
          <i v-if="taskstate == 3"></i>
          <i
            v-else
            class="iconfont xuan"
            :class="[
              isSelected == 1 || isSelectAll == 1
                ? 'icon-xuanzhong'
                : 'icon-weixuanzhongyuanquan',
            ]"
          >
          </i>
        </div>
      </div>
    </div>
    <!-- 空 -->
    <div class="nodataDiv" v-else>
      <div>
        <div class="nodata"></div>
        <div class="nodataText">暂无内容</div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="odataList.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout=" prev, pager, next,jumper,total"
        :total="totals"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </div>
    <!-- 收藏弹框 -->
    <el-dialog title="信息" :visible.sync="isCollect" width="470px" top="30vh">
      <div class="shou">是否{{ msg1 }}该视频</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitCollect()">确 定</el-button>
        <el-button type="info" @click="isCollect = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog
      title="查看详情"
      :visible.sync="videoDetail"
      width="14rem"
      top="13vh"
      custom-class="detail-video"
    >
      <div class="detail-box">
        <div class="left-con">
          <div class="imgShow">
            <img src="~@/assets/images/mo_bg.png" alt="" />
          </div>
          <ul>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>会议名称
              </span>
              <span class="con">存储网关</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>录制时间
              </span>
              <span class="con">2021-08-06 17:47:33</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>录制人
              </span>
              <span class="con">pamir</span>
            </li>
            <li class="item">
              <span class="title"> <i class="iconfont icon-aims"></i>时长</span>
              <span class="con">00:00:35</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>文件大小</span
              >
              <span class="con">112.85KB</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>录制服务器
              </span>
              <span class="con">10.1.54.138</span>
            </li>
            <li class="item">
              <span class="title">
                <i class="iconfont icon-aims"></i>存储网关
              </span>
              <span class="con">10.1.54.138</span>
            </li>
          </ul>
        </div>
        <div class="right-con">
          <div class="content1">
            <el-form ref="videoInfo" :model="videoInfo" label-width="120px">
              <el-form-item label="录制名称">
                <el-input
                  v-model.trim="videoInfo.recordName"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="会议名称">
                <el-input
                  v-model.trim="videoInfo.meetingName"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-input
                  v-model.trim="videoInfo.createTime"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建用户">
                <el-input
                  v-model.trim="videoInfo.createUser"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="录制人员">
                <el-input
                  v-model.trim="videoInfo.recordPerson"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="主讲人员">
                <el-input
                  v-model.trim="videoInfo.speaker"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="参与人数">
                <el-input
                  v-model.trim="videoInfo.number"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注信息">
                <el-input
                  type="textarea"
                  v-model="videoInfo.remark"
                  maxlength="500"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  resize="none"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import img1 from "@/assets/images/ico_shoucang_normal@2x.png";
import img2 from "@/assets/images/ico_shoucang_click@2x.png";
import "@/assets/css/personalResources.less";
export default {
  name: "RealTimeRecording", //实时录制
  data() {
    return {
      videoType: "",
      form: {
        searchVideo: "",
      },
      options: [
        {
          value: "",
          label: "全部视频",
        },
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
        {
          value: "5",
          label: "双皮奶",
        },
        {
          value: "6",
          label: "蚵仔煎",
        },
        {
          value: "7",
          label: "龙须面",
        },
        {
          value: "8",
          label: "蚵仔煎",
        },
        {
          value: "9",
          label: "龙须面",
        },
      ],
      isDelete: true,
      odataList: [{ item: "1" }],
      // odataList: [],
      flag: 0, //置灰标识
      params: {
        pageNumber: 1,
        pageSize: 8,
      },
      currentPage: 1,
      pageSize: 8,
      totals: 800,
      videoData: [], //视频数据
      taskstate: 4,
      type: 0,
      audit: 1,
      time: 1233,
      titleTip: "该视频不可点击",
      tip: "bug64_1214234234234232345345345",
      collectionState: 0, //收藏
      img1: img1,
      img2: img2,
      isCollect: false, //收藏弹框
      msg1: "收藏",
      msg2: "",
      lookDetail: "查看详情",
      lookDelete: "删除",
      isShow: false,
      isSelected: 0,
      isSelectAll: 0,
      videoDetail: false,
      videoInfo: {
        //详情信息
        recordName: "存储网关",
        meetingName: "存储网关",
        createTime: "2021/8/12",
        createUser: "存储网关",
        recordPerson: "存储网关",
        speaker: "存储网关",
        number: "存储网关",
        remark: "存储网关",
      },
    };
  },
  methods: {
    getList() {
      if (this.odataList.length > 0) {
        this.flag = 1;
      } else {
        this.flag = 0;
      }
    },
    // 收藏
    collectdata() {
      // if (this.taskstate == 3) {
      //   this.msg2 = "录制中";
      // } else if (this.taskstate == 0) {
      //   this.msg2 = "未开始";
      // } else if (this.taskstate == 1 || this.taskstate == 2) {
      //   this.msg2 = "准备录制";
      // } else if (this.taskstate < 0) {
      //   this.msg2 = "录制错误";
      // } else if (this.taskstate == 4) {
      //   this.msg2 = "录制完成";
      // }
      if (this.collectionState == 0) {
        this.msg1 = "收藏";
        this.isCollect = true;
      } else {
        this.msg1 = "取消收藏";
        this.isCollect = true;
      }
    },
    submitCollect() {
      let msg = "";
      if (this.collectionState == 0) {
        this.collectionState = 1;
        msg = "已收藏";
      } else {
        this.collectionState = 0;
        msg = "已取消收藏";
      }
      this.isCollect = false;
      this.$layer.msg(msg);
    },
    //分页 页码数量
    handleSizeChange: function (val) {
      this.params.pageNumber = 1;
      this.params.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.params.pageNumber = val;
      this.getList();
    },
    // 搜索
    search() {},
    //删除
    deleteAll() {
      this.isDelete = false;
      this.isShow = true;
    },
    cancel() {
      this.isDelete = true;
      this.isShow = false;
    },
    // 单选
    fnClick() {
      if (this.isSelected == 0) {
        this.isSelected = 1;
      } else {
        this.isSelected = 0;
      }
      // this.odataList[0].isSelected
      //   ? this.$set(this.odataList[0], "isSelected", 0)
      //   : this.$set(this.odataList[0], "isSelected", 1);
    },
    // 查看详情
    detailItem() {
      this.videoDetail = true;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="less">
.detail-video {
  .el-dialog__body {
    padding: 0 0 20px 0;
    .el-input__inner {
      border-color: #162448;
      color: #4967a1;
      &:hover {
        border-color: #162448;
      }
    }
    .el-textarea {
      .el-textarea__inner {
        border-color: #162448;
        color: #4967a1;
        /*滚动条样式 */
        &::-webkit-scrollbar {
          width: 3px;
          height: 3px;
          background: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: transparent;
          border-radius: 4px;
        }

        &:hover::-webkit-scrollbar-thumb {
          background: #536597;
        }

        &:hover::-webkit-scrollbar-track {
          background: #536597;
        }
      }
    }
  }
}
.select {
  .left-s {
    .el-input__inner {
      width: 90%;
    }
  }
  .right-s {
    .el-input {
      width: inherit;
    }
    .el-input__inner {
      border-radius: 0;
    }
  }
}
</style>


